<script setup lang="ts">
import { reactive } from 'vue';
import ChartCommon from '@/components/ChartCommon.vue';


// 图一配置项
const option1 = reactive({
    title: {
        text: 'ECharts入门实例'
    },
    tooltip: {},
    // 图例
    legend: {
        data: ['销量', '销售额']
    },
    xAxis: {
        // category 维度轴
        type: 'category',
        data: ['衬衫', '羊毛衫', '', '裤子', 'xx', '袜子']
    },
    yAxis: {
        // value 数值轴
        type: 'value'
    },
    // 值轴数据
    series: [
        {
            // 图例名称
            name: '销量',
            // 柱状图bar
            type: 'bar',
            // 数值
            data: [5, 20, 36, 10, 10, 20]
        },
        {
            name: '销售额',
            // 折线图line
            type: 'line',
            data: [5, 20, 36, 10, 10, 20]
        }
    ]

})

// 图二配置项
const option2 = reactive({
    title: {
        text: '每周花销',
        // 副标题
        subtext: '管我怎么花',
    },
    tooltip: {
        show: true,
        trigger: 'item',
        axisPointer: {
            type: 'cross'
        },
        triggerOn: 'click'
    },
    toolbox: {
        show: true,
        feature: {
            dataView: { show: true, readOnly: false },
            // 自由切换柱状图、折线图
            magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    // 图例
    legend: {
        data: ['早饭', '午饭', '晚饭']
    },
    xAxis: {
        // category 维度轴
        type: 'category',
        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
    },
    yAxis: {
        // value 数值轴
        type: 'value'
    },
    // 值轴数据
    series: [
        {
            // 图例名称
            name: '早饭',
            // 柱状图bar
            type: 'bar',
            // 数值
            data: [5, 20, 36, 10, 10, 20],
            // 曲线平滑
            smooth: true,
            markPoint: {
                data: [
                    {
                        name: '本周早饭花销最多的一天',
                        type: 'max'
                    },
                    {
                        name: '本周早饭花销最少的一天',
                        type: 'min'
                    }
                ]
            },
            markLine: {
                data: [
                    {
                        type: 'average',
                        name: '本周平均早饭花销'
                    }
                ]
            }
        },
        {
            name: '午饭',
            // 折线图line
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            smooth: true,
            markPoint: {
                data: [
                    {
                        name: '本周午饭花销最多的一天',
                        type: 'max'
                    },
                    {
                        name: '本周午饭花销最少的一天',
                        type: 'min'
                    }
                ]
            },
            markLine: {
                data: [
                    {
                        type: 'average',
                        name: '本周平均午饭花销'
                    }
                ]
            }
        },
        {
            name: '晚饭',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            smooth: true,
            markPoint: {
                data: [
                    {
                        name: '本周晚饭花销最多的一天',
                        type: 'max'
                    },
                    {
                        name: '本周晚饭花销最少的一天',
                        type: 'min'
                    }
                ]
            },
            markLine: {
                data: [
                    {
                        type: 'average',
                        name: '本周平均晚饭花销'
                    }
                ]
            }
        }
    ]
})

// 图三配置项
const option3 = reactive({
    title: {
        text: '世界人口总量'
    },
    tooltip: {},
    // 图例
    legend: {
        data: ['2011', '2012']
    },
    xAxis: {
        // value 数值轴
        type: 'value'
    },
    yAxis: {
        // category 维度轴
        type: 'category',
        data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口']

    },
    // 值轴数据
    series: [
        {
            // 图例名称
            name: '2011',
            // 柱状图bar
            type: 'bar',
            // 数值
            data: [1231123, 232323, 1231213, 1212331, 3112310, 3123123]
        },
        {
            name: '2012',
            // 折线图line
            type: 'bar',
            data: [123113, 1212310, 3121316, 1121130, 1332230, 11111120]
        }
    ]

})

// 图四配置项
const option4 = reactive({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['利润', '费用', '收入']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'value'
        }
    ],
    yAxis: [
        {
            type: 'category',
            axisTick: {
                show: false
            },
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
        }
    ],
    series: [
        {
            name: '利润',
            type: 'bar',
            label: {
                show: true,
                position: 'inside'
            },
            emphasis: {
                focus: 'series'
            },
            data: [200, 170, 240, 244, 200, 220, 210]
        },
        {
            name: '收入',
            type: 'bar',
            stack: 'Total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [320, 302, 341, 374, 390, 450, 420]
        },
        {
            name: '费用',
            type: 'bar',
            stack: 'Total',
            label: {
                show: true,
                // 柱状图数值在左侧
                position: 'left'
            },
            emphasis: {
                focus: 'series'
            },
            data: [-120, -132, -101, -134, -190, -230, -210]
        }
    ]
})
</script>

<template>

    <div class="chart-container">
        <div class="chart-item">
            <ChartCommon :chart_option="option1" />
        </div>
        <div class="chart-item">
            <ChartCommon :chart_option="option2" />
        </div>
    </div>
    <div class="chart-container">
        <div class="chart-item">
            <ChartCommon :chart_option="option3" />
        </div>
        <div class="chart-item">
            <ChartCommon :chart_option="option4" />
        </div>
    </div>

</template>

<style scoped lang="scss">
@import '@/styles/scss_var.scss'
</style>
